<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" >

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
</head>
<body>
<form>
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="email" class="form-control" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
    </div>

    <button type="button" class="btn btn-default">登录</button>
</form>
</body>

<script>
    // ajax登录
    $("button").click(function () {
        // 获取表单信息、进行前端验证
        let username = $('#username').val();
        let password = $('#password').val();
        if (username.length <3 || username.length > 8) {
            alert('用户名长度不符合规范');
            return false;
        }
        if (password.length <6) {
            alert('密码长度不符合规范');
            return false;
        }

        // 进行登录
        $.ajax({
            url:'/api/login',
            data:{username:username,password:password},
            dataType:'json',
            type:'POST',
            success:function (response) {
                // 判断返回结果
                if (response.code == 200) {
                    // 接口返回的token我们页面如何保存？
                    // 页面本地保存
                    window.localStorage.setItem('token',response.data.token);

                    location.href='/front/add';
                } else {
                    alert(response.msg);
                }
            }
        })
    });

</script>
</html>